<template>
  <div class="qrcode">
    <div class="blank">
    <div class="shop">商品名称</div>
    <div v-for="item in list" :key="item.id">
    <div class="time">取货时间：<span >{{item.allowTime}}</span></div>
    <div class="place">取货地址：<span>{{item.goodsPickUpAddr}}</span></div>
    </div>
    <div id="qrcode"></div>
    </div>
  </div>
</template>

<script>
import QRCode from "qrcodejs2";
import * as api from "../../request/api.js"
export default {
  name: "qrcode",
  data(){
    return{
      pickUpToken:'',
      list:[]
    }
  },
  created() {
    this.pickUpToken=this.$route.query.pickUpToken
    console.log(this.pickUpToken)
    this.$http({
      method:'post',
      url:api.GOODSPICKUPDDR,
      data:{
        goodsId:this.$route.query.goodsId
      }
    })
    .then(resp=>{
      console.log(resp)
      this.list=resp.data.data
    })
    .catch(resp=>{})
  },
    mounted () {
    this.qrcode();
  },
  methods: {
    qrcode() {
      let qrcode = new QRCode("qrcode", {
        width: 200,
        height: 200, // 高度
        text: this.pickUpToken,// 二维码内容
        // render: 'canvas' // 设置渲染方式（有两种方式 table和canvas，默认是canvas）
        background: '#f0f',
        foreground: '#ff0', 
      });
      console.log(qrcode);
    }
  }
};
</script>

<style lang="less" scoped>
#qrcode {
    
    margin-top: 40px;
    display: flex;
    margin-left: 150px;
    img {
      width: 332px;
      height: 332px;
      margin: 40px auto;
      background-color: #fff; //设置白色背景色
      padding: 6px; // 利用padding的特性，挤出白边
    }
  }
  .blank{
    width: 94%;
    height: 660px;
    background: #fff;
    border-radius:20px; 
    margin-left: 3%;
    margin-top: 40px;
  }
  .shop{
    padding-top: 20px;
    font-size: 28px;
    text-align: center;
    padding-top: 40px;
    color: #a1363c;
  }
.time,.place{
 font-size: 24px;
 color: #333333;
 margin-right: 20px;
 margin-left: 20px;
 margin-top: 20px;
 span{
   color:#a1363c;
 }
}

</style>
